import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:ff_flutter/screens/home/index.dart';
import 'package:ff_flutter/screens/short_videos/index.dart';
import 'package:ff_flutter/screens/messages/index.dart';
import 'package:ff_flutter/screens/account/index.dart';

class IndexScreen extends StatefulWidget {
  // 改为 StatefulWidget
  @override
  State<IndexScreen> createState() => _IndexScreenState();
}

class _IndexScreenState extends State<IndexScreen> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    HomeScreen(),
    ShortVideoScreen(),
    MessageScreen(),
    AccountScreen(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF1E1E1E),
      body: IndexedStack(
        index: _selectedIndex,
        children: _pages,
      ),
      bottomNavigationBar: Container(
        height: 168.h,
        decoration: const BoxDecoration(
          color: Color(0xFF1E1E1E),
        ),
        child: Theme(
          data: ThemeData(
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent,
          ),
          child: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
                activeIcon: Icon(Icons.home, color: Color(0xFFE7568C)),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.play_circle_outline),
                label: 'Short Video',
                activeIcon:
                    Icon(Icons.play_circle_outline, color: Color(0xFFE7568C)),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.notifications_none),
                label: 'Message',
                activeIcon:
                    Icon(Icons.notifications_none, color: Color(0xFFE7568C)),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person_outline),
                label: 'Account',
                activeIcon:
                    Icon(Icons.person_outline, color: Color(0xFFE7568C)),
              ),
            ],
            currentIndex: _selectedIndex,
            selectedItemColor: const Color(0xFFE7568C),
            unselectedItemColor: Colors.grey,
            backgroundColor: const Color(0xFF1E1E1E),
            type: BottomNavigationBarType.fixed,
            selectedFontSize: 24.sp,
            unselectedFontSize: 24.sp,
            iconSize: 48.sp,
            elevation: 0,
            onTap: _onItemTapped,
          ),
        ),
      ),
    );
  }
}

class DownloadButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton.icon(
      onPressed: () {
        // 处理下载逻辑
      },
      icon: const Icon(
        Icons.system_update_alt,
        size: 30,
        color: Color(0xfff1f1f1), // 设置图标颜色为 0xfff1f1f1
      ),
      label: const Text(
        "Download",
        style: TextStyle(
          color: Color(0xfff1f1f1),
          fontSize: 26,
          fontFamily: "PingFang SC",
          fontWeight: FontWeight.w800,
        ),
      ),
      style: ElevatedButton.styleFrom(
        backgroundColor:
            const Color(0xffe7568c), // 使用 backgroundColor 替代 primary
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(27.r),
        ),
        padding: EdgeInsets.symmetric(horizontal: 17.w, vertical: 9.h),
        minimumSize: Size(195.w, 54.h),
      ),
    );
  }
}

class CustomIconButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 54.w,
      height: 54.h,
      child: Stack(
        children: [
          Container(
            width: 54.w,
            height: 54.h,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Color(0xff151313),
            ),
          ),
          Positioned.fill(
            child: Align(
              alignment: Alignment.center,
              child: const Icon(
                Icons.notifications,
                size: 36,
                color: Color(0xfff1f1f1), // 设置图标颜色为 0xfff1f1f1
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class MoreButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Text(
          "more",
          style: TextStyle(
            color: Color(0xff929292),
            fontSize: 26,
          ),
        ),
        SizedBox(width: 10.w),
        Transform.rotate(
          angle: 3.14,
          child: Container(
            width: 26.w,
            height: 26.h,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.r),
            ),
            child: const Icon(
              Icons.arrow_back, // 替换为合适的图标
              size: 26,
              color: Color(0xfff1f1f1), // 设置图标颜色为 0xfff1f1f1
            ),
          ),
        ),
      ],
    );
  }
}
